<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('公司列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: container-css"/>
    <style type="text/css">
        .orgchart {
            background: #fff;
        }

        .orgchart td.left, .orgchart td.right, .orgchart td.top {
            border-color: #aaa;
        }

        .orgchart td > .down {
            background-color: #aaa;
        }



        .orgchart .comp .content {
            border-color: #B8860B;
        }
        .orgchart .comp .title {
            background-color: #B8860B;
        }


        .orgchart .dep .content {
            border-color: #1E90FF;
        }
        .orgchart .dep .title {
            background-color: #1E90FF;
        }

        .orgchart .job .content {
            border-color: #7CFC00;
        }
        .orgchart .job .title {
            background-color: #7CFC00;
        }

        .orgchart .emp .content {
            border-color: #4F94CD;
        }
        .orgchart .emp .title {
            background-color: #4F94CD;
        }




        .fixed-table-container .bs-checkbox .th-inner {
            padding: 8px 8px !important;
        }

        .form-group {
            margin-right: 35px !important;
        }

        .select2 {
            width: 100% !important;
        }

        .select2-dropdown {
            z-index: 99999 !important;
        }

        .title {
            height: 100% !important;
            white-space: normal !important;
            padding-right: 5px;
            padding-left: 5px;
        }

        .fa-group:before, .fa-users:before {
            content: "";
        }

        .edge {
            display: none;
        }
    </style>
</head>
<body class="white-bg">
<form id="user-form" AUTOCOMPLETE="OFF">
    <div class="modal inmodal fade" id="myModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">组织结构图</h4>
                </div>
                <div class="modal-body">
                    <p>
                        查询日期:
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" id="term" class="form-control laydate-demo-1" placeholder="yyyy-MM-dd">
                    </div>
                    </p>
                    <p>
                        查询公司:
                    <div class="input-group date">
                        <select id="compId" name="compId" class="form-control"
                                required>
                            <option value="">请选择</option>
                            <option th:each="company:${companys}" th:value="${company.compID}"
                                    th:text="${company.title}"></option>
                        </select></div>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" id="missmodal1" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" onclick="getData()" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>
    <button type="button" id="modal1" class="btn btn-primary" data-toggle="modal"
            data-target="#myModal1">选择时间段
    </button>


    <div class="ui-layout-center" id="ui-layout-center">
        <div id="chart-container"></div>
    </div>
</form>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: bootstrap-table-editable-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: container-js"/>


<script th:inline="javascript">
    var prefix = ctx + "contractManage/historyContract";
    $(function () {
        $.fn.modal.Constructor.prototype.enforceFocus = function () {
        }

        var panehHidden = false;
        if ($(this).width() < 800) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 350});
        $(".datetimepicker-demo-2").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '.laydate-demo-2',
                type: 'date'
            });
        });

        $(".datetimepicker-demo-1").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '.laydate-demo-1',
                type: 'date'
            });
        });
        $("#modal1").attr("style", "display:none;");
        $("#modal1").click();
    });

    function getData() {
        $("#missmodal1").click();
        findAllTree($("#compId").val(), $("#term").val(), 'comp');
    }

    function findAllTree(id, term, type) {
        var datascource;
        $.ajax({
            //请求方式
            type: "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: ctx + "orgs/findOrgs",
            data: {
                "id": id,
                "term": term,
                "type": type
            },
            //请求成功
            success: function (result) {
                datascource = result;
                //console.log(JSON.stringify(datascource));
                var oc = $('#chart-container').orgchart({
                    'data': datascource.orgsData,
                    'nodeContent': 'remark',
                    'direction': 't2b',
                    'draggable': true,
                    'toggleSiblingsResp': false
                });

                oc.$chart.find('.node').on('click', function () {
                    var title = $(this).children('.title').text();

                    //根据抬头找id
                    for (var i = 0; i < result.Table.length; i++) {
                        if (title == result.Table[i].title) {
                            // $('#chart-container').remove();
                            // $('#ui-layout-center').append('<div id="chart-container"></div>');
                            // findAllTree(result.compTable[i].id, $("#term").val(), result.onclickType);
                            var id = result.Table[i].id;
                            var term = $("#term").val();
                            var type = result.onclickType;
                            $.operate.eject_window(result.Table[i].title, ctx + "orgs/open?id=" + id + "&term=" + term + "&type=" + type, "da");
                        }
                    }
                });
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

</script>
</body>
</html>